8.3 AngularJS

  1. Motivations
    • Do you remember how you can include PHP code in HTML code on the server side?
    • Can you include programming code in HTML code on the client side?
    • How to bind user input to output?

  2. Observation on data-view binding in AngularJS
    • Read all in AngularJS Tutorial.
      • AngularJS extends HTML with new ???
      • What are single page applications?
      • Can you imagine how AngularJS is implemented?
    • Read carefully all in AngularJS Introduction.
      • What is a JavaScript framework?
      • AngularJS extends HTML with ???, and binds data to HTML with ???
      • The ??? directive defines an AngularJS application.
      • The ??? directive defines the value of HTML controls (input, select, textarea) to application data.
      • The ??? directive binds application data to the HTML view.
      • The ??? directive initializes AngularJS application variables.
      • You can use ??? instead of ng-.
      • AngularJS ??? bind data to HTML the same way as the ng-bind directive.
      • AngularJS applications are controlled by controller. The ??? directive defines the controller.
      • When is the AngularJS controller code be executed?
      • Is it alright to say AngularJS introduces the programming with HTML elements?
    • Read all in AngularJS Expressions.
      • What if ng-app directive is missing?
      • AJS numbers, strings, objects and arrays are like JS.
      • How can you use ng-bind instead of expressions? Study the 4th example.
      • What can you use instead of ng-init?
      • Can you use objects and arrays with AJS?
      • What if there is an error in an AJS expression?
    • Read all in AngularJS Directives.
      • The ??? directive defines the root element of an AJS application.
      • The ??? directive defines initial values for an AJS application.
      • Data binding in AJS, 'synchronizes' AngularJS expressions with AngularJS data. What does 'synchronizes' mean?
      • The ??? directive repeats an HTML element.
    • Read all in AngularJS Controllers.
      • For what do you use AJS controllers?
        Connection between your JS code and AngularSJ
      • AJS ??? control the data of AJS applications. They are regular JS ???.
      • AJS invokes controllers with a ??? object. In AJS, ??? is the application object (the owner of application variables and functions).
      • AJS controllers can have ??? as well as ???.
      • How to store controllers in external files and use them?
      • List 5 directives.
    • Analysis of the basic idea used for data-view binding in AngularJS
      • ng-init: models (, i.e., variables [with initial values])
      • ng-model: binding models (, i.e., variables) to input
      • ng-bind, expression: binding models to view (, i.e., output)
      • ng-controller, and corresponding script
        • Interaction between models and JavaScript code
        • From ng-app to ng-controller
        • That is that the models defined in ng-app are visible in ng-controller, and they can be controlled.
        • Hence the design of data-view binding is done in the controller.
    • Any good idea how AngularJS is implemented?

  3. [Other feathres for your further interest]
    • Read all in AngularJS Filters.
      • Filters can be added to expressions and directives using a ??? character.
      • List 5 filters.
      • How to use the filters?
      • How to sort in descending order?
      • What can you do with an input filter?
    • Read all in AngularJS XMLHttpRequest.
      • ??? is an AJS service for reading data from remove servers.
      • ??? is an XMLHttpRequest object.
      • ??? is a core service for reading data from web servers. and ??? is the function to use for reading server data.
      • What if the server data is changed while the client program is running?
      • How to use 'post' instead of 'get'?
      • Read the examples in 'General usage' in $http.
    • Read all in AngularJS Tables.
      • The ??? directive is perfect for displaying tables.
      • It is very nice.
    • Read all in AngularJS SQL.
      • Requests for data from a different server (than the requesting page), are called ??? HTTP requests. In most browsers, ??? requests are restricted to same site for security reasons. What does this mean?
      • How to let browsers allow cross-site access?
      • How to send JSON data from a PHP program?
    • Read all in AngularJS HTML DOM.
      • The ??? directive binds AJS application data to the 'disabled' attribute of HTML elements.
      • The ??? directive shows or hides an HTML element.
      • The ??? directive hides or shows an HTML element.
      • Any directive value can be an expression.
    • Read all in AngularJS Events.
      • The ??? directive defines an AJS click event.
      • In the first example, where is 'count' defined?
      • The ??? directive defines an AJS double click event.
      • Read 'AngularJS Event Listener Directives' in AngularJS Events for more events.
    • Read all in AngularJS Modules.
      • ??? define applications. All application controllers should belong to a ???.
      • Study closely 'myAppljs' and 'myCtrol.js' in the 1st example.
      • G??? values should be avoided in applications. They can easily be overwritten or destroyed by other scripts.
      • When an AJS application does not have a name, and the controller function is g???.
      • How to resolve the global namespace issue?
      • When an application has a name with the ??? directive, the controller is a property of the application ???.
    • Read all in AngularJS Forms.
      • What does 'novalidate' attribute do?
      • What if '$scope.user = $scope.master;' in the example?
    • Read all in AngularJS Input Validation.
      • Is server-side validation still necessary?
      • Each form directive creates an instance of FormController. Read all in form.FormController for more properties.
    • Read all in AngularJS and Twitter Bootstrap.
      • ??? is a popular style sheet.
    • Read all in AngularJS Includes.
      • Any good idea to use JS to include HTML in HTML?
      • With AJS, you can include HTML content, using the ??? directive.
    • Read all in AngularJS Application.
    • Full reference - Guide to AngularJS Documentation

  4. Learning outcomes
    • Analyze the data-view binding in AngularJS